<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pdf模拟测试</title>
    <link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
    <style>
        body {
            display: flex;
        }
        .container {
            width: 50%; /* 左侧占一半宽度 */
            padding: 20px;
            border: 1px solid #ccc;
        }
        .sidebar {
            width: 50%; /* 右侧占一半宽度 */
            padding: 20px;
            border: 1px solid #ccc;
            display: none;
        }

    </style>
</head>
<body>
<div class="container">
    <!-- 这里放你的原始内容 -->
    <div style="height: 80px">
        <h3>测试服务器ip： 223.70.139.221</h3>
        <h3>测试服务器端口： 8888;</h3>
        <hr>
    </div>
    <div class="layui-btn-container">
        <h3 style="color: red">``` Word文档转换PDF插入条形码并签章:</h3><br>

        <!-- HTML部分 -->
        <form id="pdfForm"  enctype="multipart/form-data">
            <h4>条形码规则编号<span style="color: red">（必填）如果需要同时加盖多个条形码以##隔开，例如：7C175D0547544269##1A16C8EEB438AF4B</span></h4>
            <input type="text" name="barcoderuleNumber" value="3D388E5EB88D5E3E"  id="barcoderuleNumber" placeholder="" style="width: 300px" class="layui-input">

            <h4>签章规则编号<span style="color: red">（必填）</span></h4>
            <input type="text" name="signSealRuleNum" value="66D0C57760EA1896"  id="signSealRuleNum" placeholder="" style="width: 300px" class="layui-input">

            <h4>条形码内容数据<span style="color: red">（必填）</span></h4>
            <input type="text" name="contents" value="i love you"  id="contents" placeholder="" style="width: 300px" class="layui-input">

            <h4>选择word文件</h4>
            <input type="file"  id="fileInput"  name="file" class="layui-btn demo-class-accept">
            <input type="button"  value="提交" id="submitButton" onclick=" check()" class="layui-btn demo-class-accept">
            <input type="button"  value="下载" id="downloadButton" onclick=" download()" class="layui-btn demo-class-accept">

        </form>

        <div class="layui-btn-container">



        </div>
        <div style="height: 80px">
            <!-- ... -->
        </div>
    </div>
</div>
<div class="sidebar" id="sidebarContent">
    <div class="layui-form">

        <hr class="ws-space-16">
        <textarea name="" placeholder="多行文本框" class="layui-textarea" style="height: 300px">

        </textarea>
    </div>
    <br>
    <button id="closeSidebarButton" class="layui-btn layui-btn-sm">关闭</button>
</div>

<!-- JavaScript部分 -->
<script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>



<script>


    // 生成随机字符串
    function generateRandomString(length) {
        const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        let randomString = '';
        for (let i = 0; i < length; i++) {
            const randomIndex = Math.floor(Math.random() * characters.length);
            randomString += characters.charAt(randomIndex);
        }
        return randomString;
    }
    function download(){

// 生成随机文件名
        const randomFileName = generateRandomString(24) + '.pdf';
        let that = this;
        this.loading = true;
        var xhr = new XMLHttpRequest(); // 用这种原生请求下载后端返回的二进制流打开就不会出现空白
        xhr.open(
            "get",
            "/downloadwordtoPDFandSeal",
            true
        );
        xhr.responseType = "blob";
        xhr.onload = function() {
            that.loading = false;
            const url = window.URL.createObjectURL(this.response);
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", randomFileName);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        };
        xhr.send();




    }
    function check() {

        var fileInput = $("#fileInput");
        var barcoderuleNumber = document.getElementById("barcoderuleNumber").value
        var signSealRuleNum = document.getElementById("signSealRuleNum").value
        var contents = document.getElementById("contents").value
        if (barcoderuleNumber === "" ||signSealRuleNum==="" || contents==="") {
            alert("必填项未填写完毕");
            return false;
        }


        if (fileInput.get(0).files.length === 0) {
            alert("未选择文件");
            return false;
        }

        var formData = new FormData($("#pdfForm")[0]);
        $.ajax({
            url: "/wordtoPDFandSeal",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {

                if(response.code==200){
                    layer.open({
                        title: '提示',
                        content: "嵌入二维码成功",
                    });
                }
                else {
                    layer.open({
                        title: '提示',
                        content:response.msg ,
                    });
                }


            },
            error: function(xhr, status, error) {
                // Handle error response from the server
                alert("服务端错误: " + error);
            }
        });
    }








</script>


</body>
</html>